<template>
    <div class='app' v-on:click="appClick">
        <div class='content'>
            
            <div class='content_item' v-for="(item,index) in desktop" :key="index" v-on:click="openWin(item)">
                <img :src='item.icon'>
                <div>{{item.text}}</div>
            </div>
            <el-dialog
                v-el-drag-dialog
                :title="item.text"
                :modal="false"
                class="dialogClass"
                :opened="dialogOpen"
                :visible.sync="item.dialogVisible"
                :width="item.width" :height="item.height" v-for="(item,index) in windowModel" :key="index">
                
                    <iframe id="iframe" name="iframe" :src="item.url"  class='dialogIframe'  frameborder="no" border="0" marginwidth="0" marginheight="0" style='width:100%'></iframe>
        
                
            </el-dialog>

        </div>
        <div class='bar'>
            <div class='item' id='computer' v-on:click="changeShorts"  @click.stop>
                <i class='fa fa-windows'></i>
            </div>
            <div class='bar_content'>
                <div class='bar_item' v-for="(item,index) in barList" :key="index" v-on:click="openWin(item)">
                    <img :src='item.icon'>
                    <span>{{item.text}}</span>
                </div>
            </div>
            <div class='bar_right'>
                 <div id='DateTime'></div>
            </div>
            
        </div>
        <div class='shortMenu' id='shortMenu'   @click.stop>
            <div class='menu_main'>

                <div class='menu_left'>
                     <div class='menu_item' id='user' v-on:mouseover="leftMenuShow" v-on:mouseleave="showLeftMenu=false" @click.stop>
                        <i class='fa fa-user-circle'></i>
                    </div>
                   <div class='menu_item' id='cog' v-on:mouseover="leftMenuShow"  v-on:mouseleave="showLeftMenu=false"  @click.stop>
                        <i class='fa fa-cog'></i>
                    </div>
                    <div class='menu_item' id='power-off' v-on:mouseover="leftMenuShow" v-on:mouseleave="showLeftMenu=false"   @click.stop>
                        <i class='fa fa-power-off'></i>
                    </div>
                </div>
                <div class='menu_content'>
                    <div class='list_item' v-for="(item,index) in leftMenu" :key="index" v-on:click="openWin(item)">
                        <img :src='item.icon'><span>{{item.text}}</span>
                    </div>
                  
                </div>
                <div class='menu_right'>
                   <div v-for="(item,index) in rightMenu" :key="index" class='big_menu_item' v-on:click="openWin(item)">
                        <img :src="item.icon">
                        <div>{{item.text}}</div>
                   </div>
                </div>

                <div class='menu_left_child' id='left_menu_child' v-on:mouseleave="hiddenMenuShow">
                    <div class='left_menu_child_item'>
                        <div class='menu_item_2' id='user'>
                            <i class='fa fa-user-circle'></i>
                            <span>Administrator</span>
                            
                        </div>
                        
                        <div class='menu_item_2' id='cog'>
                            <i class='fa fa-cog'></i>
                            <span>设置</span>
                        </div>

                        
                        <div class='menu_item_2' id='power-off' >
                            <i class='fa fa-power-off'></i>
                            <span>电源</span>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import Vue  from 'vue'
import 'font-awesome/scss/font-awesome.scss'
export default {
    name: 'win10',
    components: {
   
    },
    data(){
        return {
            leftMenu:[{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://www.baidu.com',
                width:'59%',
                height:'350px',
                id:'1'
            },{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://mail.126.com',
                width:'59%',
                height:'350px',
                id:'2'
            }],
            windowModel:[],/**窗口 */
            showLeftMenu:false, /**主要是为了解决快速移动时不要显示左边状态栏 */
            barList:[],/**任务栏 */
            rightMenu:[{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://www.baidu.com',
                width:'59%',
                height:'400px'
            },{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://mail.126.com',
                width:'59%',
                height:'400px'
            },{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://mail.126.com',
                width:'59%',
                height:'400px'
            },{
                icon:'http://jsweixin.tianxunwang.com/rootImg/sl/logo.png',
                text:'深蓝浏览器',
                url:'http://mail.126.com',
                width:'59%',
                height:'400px'
            }],
            desktop:[]
        }
    },
    beforeCreate(){
        document.title=""; 
        let sef=this;
        /**初始化窗口数量 */
        window.addEventListener('message', function(messageEvent) {
            var data = messageEvent.data;
            let item=JSON.parse(data);
            sef.openWin(item)
        // vue.menuTitle = data;
        },false);
    },
    created(){
        let sef=this;
        window.setInterval(function(){
            sef.fnDate();
        },1000);
        for(let i=0;i<20;i++){
            let model={
                url:'',
                dialogVisible:false,
                isUse:'N',
                text:'',
                icon:'',
                width:'60%',
                height:'80%',
                id:''
            };
            this.windowModel.push(model);
        }
        let imgIp=localStorage.getItem("imgIp")
        /**获取桌面模块，目前定义所有的模块显示，没有设置自主模块 */
        this.$post('apiServe/getUserModelsByVue',{modelId:'-1',company:localStorage.getItem("company")}).then(res=>{
            console.log(res)
            let nav=res[0].nav;
            sef.desktop=[];
            for(let i=0;i<nav.length;i++){
                let n=nav[i];
                n.icon=imgIp+n.icon;
                sef.desktop.push(n);
            }
        });
    },
    methods:{
        dialogOpen(){
           
            document.getElementsByClassName(".el-dialog__body").style.padding="10px 10px"
        },
        appClick(){
           this.hiddenShorts();
        },
        changeShorts(){
            let className=document.getElementById("shortMenu").className;
            if(className=="shortMenu shortshow"){
                this.hiddenShorts();
            }else{
                this.showShorts();
            }
        },
        showShorts(){/**显示开始菜单 */
            document.getElementById("shortMenu").className="shortMenu shortshow";
            document.getElementById("computer").className="item item_active";
        },
        hiddenShorts(){/**隐藏开始菜单 */
            document.getElementById("shortMenu").className="shortMenu shorthidden";
            document.getElementById("computer").className="item";
        },
        leftMenuShow(){/**显示开始菜单最左边菜单的状态栏 */
            this.showLeftMenu=true;
            let _seft=this;
            window.setTimeout(function(){
                console.log(_seft.showLeftMenu)
                if(_seft.showLeftMenu){
                    document.getElementById("left_menu_child").className="menu_left_child leftMenuShow"
                    document.getElementById("left_menu_child").style="display:block";
                }
            },500)
            
        },
        hiddenMenuShow(){
            this.showLeftMenu=false;
            document.getElementById("left_menu_child").className="menu_left_child leftMenuHidden"
            document.getElementById("left_menu_child").style="display:none";
           
        },
        openWin(item){/**打开或者关闭窗口 */
            let isOpen=true;
            let sef=this;
            for(let i=0;i<this.windowModel.length;i++){
                let wModel=sef.windowModel[i];
                if(wModel['url']==item.url){
                    
                    sef.hiddenMenuShow();
                    sef.hiddenShorts();
                    sef.windowModel[i]['isUse']='Y';
                    if(sef.windowModel[i]['dialogVisible'])/**如果之前是开着的，则关闭 */
                        sef.windowModel[i]['dialogVisible']=false;
                    else
                        sef.windowModel[i]['dialogVisible']=true;
                    isOpen=false;
                    let zIndex=sef.changeIndex();
                   
                    sef.bindDialogEvent(i);
                    
                }
            }
            if(isOpen){
                for(let i=0;i<this.windowModel.length;i++){
                    let wModel=this.windowModel[i];
                    if(wModel['isUse']=='N'){
                        let width=item.width;
                        let height=item.height;
                        width=width=="" ? "95%":width;
                        height=height=="" ? ""+(document.documentElement.clientHeight*0.8):height;
                        width=width.indexOf("%")==-1 ? width+"px":width;
                        height=height.indexOf("%")==-1 ? height+"px":height;
                        this.windowModel[i]['isUse']='Y';
                        this.windowModel[i]['dialogVisible']=true;
                        this.windowModel[i]['url']=item.url;
                        this.windowModel[i]['text']=item.text;
                        this.windowModel[i]['icon']=item.icon;
                        this.windowModel[i]['width']=width;
                        this.windowModel[i]['height']=height;
                        this.windowModel[i]['id']=item.id;
                        

                        this.hiddenMenuShow();
                        this.hiddenShorts();
                        let bars={};
                        bars.icon=item.icon;
                        bars.text=item.text;
                        bars.url=item.url;
                        this.barList.push(bars);
                        this.bindDialogEvent(i);
                        
                        break;
                    }
                }
            }
            
        },
        bindDialogEvent(i){/**窗口初始化事件 */
            let sef=this;
            window.setTimeout(function(){
                let el=document.getElementsByClassName("el-dialog__wrapper")[i];
                const dialogEl = el.querySelector('.el-dialog');
                const dialogHeaderEl = el.querySelector('.el-dialog__header');
                const dialogBodyEl =   el.querySelector('.el-dialog__body');
                const dialogFooterEl = el.querySelector('.el-dialog__footer');
                const minmax = el.querySelector('.el-dialog__minmax');
                const closebtn = el.querySelector('.el-dialog__close');
                dialogBodyEl.style.height=sef.windowModel[i].height;
                let height=document.documentElement.clientHeight;
                let height2=Number(sef.windowModel[i].height.replace("px",""));
                let mTop=((height-height2-70)/2);
                mTop=mTop<0 ? 2:mTop
                dialogEl.style.marginTop=mTop+'px';

                
                /**为了解决点击后面的窗口让其可以在最前面显示 */
                el.style.pointerEvents="none";
                dialogHeaderEl.style.pointerEvents="auto";
                dialogBodyEl.style.pointerEvents="auto";
                if(dialogFooterEl)
                    dialogFooterEl.style.pointerEvents="auto";
                dialogBodyEl.onclick=function(){
                    let zIndex=sef.changeIndex();
                    document.getElementsByClassName("el-dialog__wrapper")[i].style.zIndex=zIndex;
                }
               
                if(dialogFooterEl){
                     dialogFooterEl.onclick=function(){
                        let zIndex=sef.changeIndex();
                        document.getElementsByClassName("el-dialog__wrapper")[i].style.zIndex=zIndex;
                    }
                }
                minmax.onclick=function(){
                   
                    sef.windowModel[i]["dialogVisible"]=false;
                }
                closebtn.onclick=function(){
                    sef.windowModel[i]["dialogVisible"]=false;
                    sef.windowModel[i]["isUse"]="N";
                    sef.windowModel[i]["url"]="";
                    sef.windowModel[i]["text"]="";
                    sef.windowModel[i]["icon"]="";
                    sef.barList.splice(i,1);
                }
                dialogBodyEl.style.padding="0";


                window.iframe.postMessage(sef.windowModel[i].height,"*");
                
            },1000)
        },
        fnDate() {
            
            var oDiv = document.getElementById("DateTime");
            var date = new Date();
            var year = date.getFullYear();//当前年份
            var month = date.getMonth();//当前月份
            var data = date.getDate();//天
            var hours = date.getHours();//小时
            var minute = date.getMinutes();//分
            var second = date.getSeconds();//秒
            var time =  this.fnW(hours) + ":" + this.fnW(minute);
            var a = new Array("日", "一", "二", "三", "四", "五", "六");
            var week = new Date().getDay();
            var str = "周" + a[week];
            oDiv.innerHTML = time + "　" + str+"<br/>"+year + "-" + this.fnW((month + 1)) + "-" + this.fnW(data) + " " ;
        },
        //补位 当某个字段不是两位数时补0
        fnW(str){
            return str > 9 ?  str :  "0" + str;}
        ,
        changeIndex(){
            let wrapper=document.getElementsByClassName("el-dialog__wrapper");
            let zIndex=0;
            for(let i=0;i<wrapper.length;i++){
                let indexs=wrapper[i].style.zIndex;
                console.log(indexs);
                if(indexs){
                    indexs=Number(indexs);
                    if(zIndex<indexs){
                        zIndex=indexs;
                    }
                }
            }
            zIndex=zIndex+1;
            if(zIndex>1000000){
                for(let i=0;i<wrapper.length;i++){
                    let indexs=wrapper[i].style.zIndex;
                   
                    if(indexs){
                        indexs=Number(indexs);
                        indexs=indexs/10000
                        document.getElementsByClassName("el-dialog__wrapper")[i].style=indexs;
                    }
                }
                zIndex=this.changeIndex();
            }
            return zIndex;
        }
            
    }
}

</script>

<style scoped  src="../../assets/css/win10/win10.css">
</style>